<template>
	<view class="container">

		<view class="header">
			<view class="arrow" @tap="$back()">
				<image src="../../../static/images/arrow_left.png" mode="aspectFit"></image>
			</view>
			<view class="tit f36 cfff">{{date}}日报</view>
			<view class="btn f32 cfff" @tap="showPopup()">更多</view>
		</view>

		<view class="businessList">

			<view class="business-item">
				<view class="number f32 c333">{{dailyList.order_num}}</view>
				<view class="text f28 c666">
					<image src="../../../static/images/icon_volume.png" mode="aspectFit"></image>
					订单量
				</view>
			</view>
			<view class="business-item">
				<view class="number f32 c333">{{dailyList.bill_num}}</view>
				<view class="text f28 c666">
					<image src="../../../static/images/icon_business.png" mode="aspectFit"></image>
					交易额
				</view>
			</view>

			<view class="business-item">
				<view class="number f32 c333">{{dailyList.trade_sum}}</view>
				<view class="text f28 c666">
					<image src="../../../static/images/icon_sales.png" mode="aspectFit"></image>
					销售量
				</view>
			</view>

		</view>

		<view class="newsList">
			<view class="news-item">
				<view class="tit f32 c333">待处理事物</view>
				<view class="list">
					<view class="list-item">
						<view class="name f30 c333">今日欠款</view>
						<view class="number f28 c666">{{dailyList.owe_money}}</view>
					</view>
					<view class="list-item">
						<view class="name f30 c333">总欠款</view>
						<view class="number f28 c666">{{dailyList.total_owe_money}}</view>
					</view>
					<view class="list-item">
						<view class="name f30 c333">总货款</view>
						<view class="number f28 c666">{{dailyList.total_owe_goods}}</view>
					</view>
				</view>

			</view>

			<view class="news-item">
				<view class="tit f32 c333">销售及支出</view>
				<view class="list">
					<view class="list-item">
						<view class="name f30 c333">销售量</view>
						<view class="number f28 c666">{{dailyList.sale_num}}</view>
					</view>
					<view class="list-item">
						<view class="name f30 c333">发货数</view>
						<view class="number f28 c666">{{dailyList.deliver_num}}</view>
					</view>
					<view class="list-item">
						<view class="name f30 c333">退货数</view>
						<view class="number f28 c666">{{dailyList.return_num}}</view>
					</view>
					<view class="list-item">
						<view class="name f30 c333">入账</view>
						<view class="number f28 c666">￥{{dailyList.income}}</view>
					</view>
					<view class="list-item">
						<view class="name f30 c333">出账</view>
						<view class="number f28 c666">￥{{dailyList.return_owe_num}}</view>
					</view>
				</view>

			</view>

			<view class="news-item">
				<view class="tit f32 c333">库存浮动</view>
				<view class="list">
					<view class="list-item">
						<view class="name f30 c333">总库存数</view>
						<view class="number f28 c666">{{dailyList.store_num}}</view>
					</view>
					<view class="list-item">
						<view class="name f30 c333">入库</view>
						<view class="number f28 c666">{{dailyList.in_store_num}}</view>
					</view>
					<view class="list-item">
						<view class="name f30 c333">出库</view>
						<view class="number f28 c666">{{dailyList.out_store_num}}</view>
					</view>
					<view class="list-item">
						<view class="name f30 c333">发货/退货</view>
						<view class="number f28 c666">{{dailyList.return_num}}/{{dailyList.return_num}}</view>
					</view>
					<view class="list-item">
						<view class="name f30 c333">库存调整</view>
						<view class="number f28 c666">+{{dailyList.adjust_in_num}}/-{{dailyList.adjust_out_num}}</view>
					</view>
				</view>

			</view>


		</view>

		<!-- 更多弹窗 -->

		<view class="More-popups" :class="showClass" @tap="hidePopup()" >
			<view class="content" @tap.stop="discard" >
				<view class="list" @tap="$open('../deal')">
					<image src="../../../static/images/icon_ledger.png" mode="aspectFit"></image>
					<text class="f30 c333">账本详情</text>
				</view>
				<view class="list"  @tap="$open('dailytoday')">
					<image src="../../../static/images/icon_daily.png" mode="aspectFit"></image>
					<text class="f30 c333">往期日报</text>
				</view>
			</view>

		</view>


	</view>
</template>

<script>
	export default{
		data(){
			return{
				showClass:'',
				dailyList:[],
				date:'2020-03-04'
			};
		},
		onLoad(option) {
			if(option.date!=undefined){
				this.date=JSON.parse(option.date)
			}else{
				this.date=this.date
			}
			this.getdDaily()
		},
		methods:{
			showPopup(){
				this.showClass = 'show';
			},
			hidePopup(){
				this.showClass = 'hide';
			},
			discard() {
				//丢弃
			},
			getdDaily(){
				let that=this;
				that.$ajax('/api/v1.statistics/daily',{
					date:that.date
				}).then(res=>{
					if(res.code==1){
						that.dailyList=res.result
					}
				}).catch(res=>{
					that.$sToast(res.message)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F4F8;
	}

	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #249AF6;
		padding: 60upx 30upx 25upx 30upx;

		.arrow {
			image {
				width: 20upx;
				height: 40upx;
			}
		}
	}

	.businessList {
		display: flex;
		flex-direction: row;
		background-color: $white-background;
		padding: 30upx 0;

		.business-item {
			width: 33.3333%;
			text-align: center;
			border-right: 2upx #ddd solid;

			&:last-child {
				border-right: none;
			}

			.text {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-top: 10upx;

				image {
					width: 36upx;
					height: 36upx;
					margin-right: 10upx;
				}
			}
		}
	}

	.newsList {
		margin-bottom: 80upx;

		.news-item {
			&:first-child {
				.list {
					.list-item {
						.number {
							color: #F64444;
						}
					}
				}
			}

			.tit {
				padding: 30upx;
			}

			.list {

				.list-item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					background-color: $white-background;
					padding: 30upx;
					border-bottom: 2upx #eee solid;
				}

			}
		}
	}

	.More-popups {
		width: 100%;
		background: rgba(12, 9, 9, .6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 999999;
		box-sizing: border-box;
		display: none;
	    &.show{
			display: block;
		}
		&.hide{
			display: none;
		}
		.content{
			width:255upx;
			height:230upx;
			background:rgba(255,255,255,1);
			border-radius:5px;
			position: absolute;
			top:130upx;
			right: 30upx;
			box-sizing: border-box;
			.list{
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 2upx #eee solid;
				padding: 30upx;
				&:last-child{
					border-bottom: none;
				}
				image{
					width: 38upx;
					height: 44upx;
					margin-right: 25upx;
				}
			}
		}
	}
	
</style>
